<template>
    <div class="basic-info card">
        <div class="title">普通话水平测试证书</div>
        <div class="form-box">
            <el-form :model="formInline" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="证书编号">
                            <el-input v-model="formInline.pscCode" placeholder="请输入证书编号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="证书等级">
                            <el-select v-model="formInline.psc" placeholder="请选择证书等级" clearable>
                                <el-option v-for="item in sys_psc_type" :key="item.dictValue" :label="item.dictLabel"
                                    :value="parseInt(item.dictValue)" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" :xs="24">
                        <el-form-item label="附件" style="width: 100%;">
                            <el-upload v-model:file-list="fileList" ref="uploadRef"
                                :class="listLengthTag === 1 ? 'hide_box' : ''" :action="uploadUrl" :headers="headers"
                                :limit="1" accept=".png,.jpg,.jpeg" list-type="picture-card" :on-success="handleFileSuccess"
                                :before-upload="beforeFileUpload" :on-exceed="handleExceed">
                                <el-icon>
                                    <Plus />
                                </el-icon>

                                <template #file="{ file }">
                                    <div>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <el-icon><zoom-in /></el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </span>
                                        </span>
                                    </div>
                                </template>
                                <template #tip>
                                    <div class="el-upload__tip">支持jpg/png格式</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div class="text-center">
                <div style="width: 164px;"></div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" draggable>
            <el-image :src="dialogImageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="4" fit="cover">
                <template #error>
                    <div class="image-slot">
                        <el-icon>
                            <Picture />
                        </el-icon>
                    </div>
                </template>
            </el-image>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useVModel } from '@vueuse/core'
import { getToken } from '@/utils/auth'
import { getFileName, truncateText } from '@/utils'

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue']);
const formInline = useVModel(props, 'modelValue', emit)

const { proxy } = getCurrentInstance();
const { sys_psc_type } = proxy.useDict('sys_psc_type');

const uploadRef = ref(null)
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/resource/oss/upload");
const headers = computed(() => {
    return {
        'Authorization': 'Bearer ' + getToken()
    }
})
function handleFileSuccess(response, uploadFile) {
    formInline.value.pscFile = response.data.url
}

function beforeFileUpload(rawFile) {
    const fileType = rawFile.type
    if (fileType.indexOf('image') === -1) {
        ElMessage.error('文件上传类型不支持')
        return false
    }
    return true
}

function handleExceed(files) {
    uploadRef.value.clearFiles()
    const file = files[0]
    uploadRef.value.handleStart(file)
    uploadRef.value.submit(file)
}


const fileList = ref([])
watch(() => formInline.value.pscFile, (val) => {
    if (!val) return
    const name = truncateText(getFileName(val), 30)
    fileList.value = [{ name, url: val }]
})

const listLengthTag = computed(() => {
    return fileList.value.length
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file) => {
    fileList.value.splice(0, 1)
    formInline.value.pscFile = ''
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}
</script>
<style scoped lang="scss">
.basic-info {
    padding: 19px 16px;

    :deep(.el-form) {
        .el-date-editor {
            --el-date-editor-width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }

    .form-box {
        display: flex;
        column-gap: 20px;
        width: 100%;

        .el-form {
            flex: 1;
        }
    }
}

.hide_box {
    ::v-deep(.el-upload--picture-card) {
        display: none;
    }
}
</style>